<template>
  <div style="height: 100%">
    <dv-full-screen-container v-if="isFullScreen">
      <!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
      <HomeContent />
    </dv-full-screen-container>
    <HomeContent v-else>
    </HomeContent>

    <div
      style="position: fixed;left: 50%;transform: translateX(-50%);top:15px;color: #01ccec;font-weight: bold;font-size: 26px;">
      载体安全管理平台</div>

    <div style="display: flex;align-items: center;position: fixed;right:10px;top:   35px;" v-if="isBoard">
      <el-select v-model="year" placeholder="请选择" size="mini" style="right: 60px;width: 100px;" @change="onYearChanged">
        <el-option label="本年" value="">
          本年
        </el-option>
        <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div style="position: fixed;right:20px;top:   35px;" v-if="isBoard">

        <i style="color: #01ccec;font-weight: bold;font-size: 20px;cursor: pointer;" class="el-icon-setting"
          @click="clickConfig"></i>
      </div>

    </div>


  </div>
</template>
<script>
  import HomeMenu from '@/components/HomeMenu';
  import HomeContent from './HomeContent';
  // import Charts from '@jiaminghi/charts';
  import { getUserInfo } from '@/service/user/index';
  import { getCurrUser } from '@/common/constants';
  import Bus from '@/common/bus'

  export default {
    components: { HomeMenu, HomeContent },
    data() {
      return {
        loading: true,
        isBoard: false,
        yearList: [],
        year: '',
        isFullScreen: false,
      };
    },
    created() {
      this.isBoard = this.$route.name == 'board';

      // this.handleFullScreen();
    },
    watch: {
      $route(to, from) {
        console.log('$route', to.name);
        this.isBoard = to.name == 'board';
      },
    },
    methods: {
      handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            console.log('1');
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            console.log('2');

            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            console.log('3');

            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      checkFull() {
        const fullscreen = window.fullScreen || document.webkitIsFullScreen;
        this.isFullScreen = fullscreen;
        return fullscreen;
      },
      async loadUser() {
        let user = getCurrUser();
        const result = await getUserInfo(user.userId);
        if (result.success) {
          sessionStorage.setItem('user', JSON.stringify(result.data));
        } else {
          this.$router.replace({ name: 'login' });
        }
      },
      clickConfig() {
        let user = getCurrUser();
        console.log('user.roleName', user.roleName);
        this.$router.push({
          name: user.roleName == 'company' ? 'companyRoleInfo' : 'configCompList',
        });
      },
      onYearChanged(val) {
        sessionStorage.setItem('year', val)
        Bus.$emit('onYearChange')

      },
    },



    mounted() {
      setTimeout(() => {
        this.loading = false;
      }, 500);

      const that = this;
      window.addEventListener('keydown', this.KeyDown, true);
      window.onresize = () => {
        that.checkFull();
      };

      let yearList = []
      let currYear = new Date().getFullYear()
      for (let i = 0; i < currYear - 2023; i++) {
        let y = (currYear - 1 - i)
        yearList.push({
          label: y + '年',
          value: y
        })
      }
      this.yearList = yearList
      let year = sessionStorage.getItem('year')
      if (year) {
        this.year = year
        console.log('year:'+year);
      }
      // this.loadUser();
    },
  };
</script>
<style scoped>
  .menu_text {
    color: #01ccec;
    font-size: 15px;
  }

  .border-box-content {
    padding: 10px;
    box-sizing: border-box;
  }

  .full_screen>.border-box-content {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .full_screen {
    height: calc(100% - 0px);
    background: url('~assets/main_page_bg.png') no-repeat;
    background-size: 100% 100%;
  }

  .menu_col {
    height: 60px;
    /* margin-bottom: 15px; */
  }

  ::v-deep .el-select .el-input__inner {
    background-color: transparent;
    color: white;
  }

  ::v-deep .el-select__tags .el-tag {
    background-color: transparent;
    color: white;
  }
</style>